import {html, TemplateResult} from 'lit';
import type {Meta, StoryObj} from '@storybook/web-components';
import "../../../echarts/map/lit-china-map.ts";
import {LitChinaMapProps} from "../../../echarts/map/lit-china-map.ts";

const meta: Meta<LitChinaMapProps> = {
    title: 'Echarts/LitChinaMap',
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: '这是一个在 Lit 组件中使用 ECharts 展示中国地图的简单示例。',
            },
        }
    },
    render: (args: LitChinaMapProps): TemplateResult => {
        return html`<lit-china-map 
            .chartId=${args.chartId}
            .width=${args.width}
            .height=${args.height}
            .center=${args.center}
            .zoom=${args.zoom}
            .emphasisColor=${args.emphasisColor}
            .areaColor=${args.areaColor}
            .borderColor=${args.borderColor}
            .data=${args.data}
        />`;
    },
    argTypes: {
        chartId: { control: 'text' },
        width: { control: 'text' },
        height: { control: 'text' },
        center: { control: 'object' },
        zoom: { control: 'number' },
        emphasisColor: { control: 'object' },
        areaColor: { control: 'object' },
        borderColor: { control: 'object' },
        data: { control: 'object' },
    },
};

export default meta;
type Story = StoryObj<LitChinaMapProps>;

export const BasicChinaMap: Story = {
    args: {
        chartId: 'basic-china-map-chart',
        width: '800px',
        height: '600px',
        center: [102.848234, 32.82333],
        zoom: 1.5,
        emphasisColor: ['#073684', '#2B91B7'],
        areaColor: ['#073684', '#061E3D'],
        borderColor: ['#00F6FF', '#87ADCB'],
        data: [
            {
                fromName: "北京",
                toName: "上海",
                coords: [
                    [116.4551, 40.2539],
                    [121.4648, 31.2891]
                ]
            },
            {
                fromName: "上海",
                toName: "北京",
                coords: [
                    [121.4648, 31.2891],
                    [116.4551, 40.2539]
                ]
            },
            {
                fromName: "北京",
                toName: "广州",
                coords: [
                    [116.4551, 40.2539],
                    [113.5107, 23.2196]
                ]
            },
            {
                fromName: "广州",
                toName: "北京",
                coords: [
                    [113.5107, 23.2196],
                    [116.4551, 40.2539]
                ]
            },
            {
                fromName: "北京",
                toName: "成都",
                coords: [
                    [116.4551, 40.2539],
                    [103.9526, 30.7617]
                ]
            },
            {
                fromName: "成都",
                toName: "北京",
                coords: [
                    [103.9526, 30.7617],
                    [116.4551, 40.2539]
                ]
            },
            {
                fromName: "成都",
                toName: "新疆维吾尔自治区",
                coords: [
                    [103.9526, 30.7617],
                    [85.294711, 41.371801]
                ]
            },
            {
                fromName: " 新疆维吾尔自治区",
                toName: "成都",
                coords: [
                    [85.294711, 41.371801],
                    [103.9526, 30.7617]
                ]
            }
        ]
    },
};